<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Trello导出统计报表" />
    <link rel="icon" href="favicon.png" />
    <title>导出 Trello 文档</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/vendor/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://api.trello.com/1/client.js?key=8f8cb72292ea78574c34ffac9db4c985"></script><!-- Please use your own key-->
    <script type="text/javascript" src="js/vendor/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="js/vendor/jquery.masonry.min.js"></script>
    <script type="text/javascript" src="js/vendor/underscore-min.js"></script>
    <script type="text/javascript" src="js/vendor/mustache.js"></script>
    <script type="text/javascript" src="js/vendor/blobbuilder.js"></script>
    <script type="text/javascript" src="js/vendor/filesaver.js"></script>
    <script type="text/javascript" src="js/vendor/showdown.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/labels.js"></script>
    <script type="text/javascript" src="js/cards.js"></script>
    <script type="text/javascript" src="js/trello_docs_product_table.js"></script>

    <style>
        .show{
            background-color:#777;
            color:white;
            padding:4px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -webkit-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
        }

        .right {
            position:relative;
            float:right;
            right:0;
            margin-right: 10px;
        }

        .yellow{border:solid 2px #d7d742;padding:-2px; background-color:#d7d742;margin-bottom:3px;}
        .orange{border:solid 2px #dd9a3c;padding:-2px;background-color:#dd9a3c;margin-bottom:3px;}
        .red{border:solid 2px #cc3333;padding:-2px;background-color:#cc3333;margin-bottom:3px;}
        .green{border:solid 2px #22C328;padding:-2px;background-color:#22C328; margin-bottom:3px;}
        .blue {border:solid 2px #3366cc;padding:-2px;background-color:#3366cc; margin-bottom:3px;}
        .purple {border:solid 2px #8c28bd;padding:-2px;background-color:#8c28bd; margin-bottom:3px;}

        del{
            color:green
        }

        table {
            border:1 solid black;
            width:90%;
            margin-bottom:50px;
            margin-left:30px;
            background:rgb(233,238,241);
            -moz-border-bottom-right-radius: 10px;
            -moz-border-bottom-left-radius: 10px;
            -ms-border-bottom-right-radius: 10px;
            -ms-border-bottom-left-radius: 10px;
            -webkit-border-bottom-right-radius: 10px;
            -webkit-border-bottom-left-radius: 10px;
            -o-border-bottom-right-radius: 10px;
            -o-border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
        }
        td {
            vertical-align:top;
            text-align:left;
            padding:5px;
        }
        caption {
            text-align:left;
            background:rgb(233,238,241);
            padding-top:5px;
            padding-left:20px;
            padding-bottom:5px;
            -moz-border-top-right-radius: 10px;
            -moz-border-top-left-radius: 10px;
            -ms-border-top-right-radius: 10px;
            -ms-border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -webkit-border-top-left-radius: 10px;
            -o-border-top-right-radius: 10px;
            -o-border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            box-shadow: 5px 0 4px -4px rgba(0,0,0,0.3);

        }
        thead {
            border-top:1px #225 solid;
        }
        tbody tr:nth-child(odd)    { background:rgb(222,226,229); }
        tbody tr:nth-child(even)    { background:rgb(210,214,217); }
        body { background-color:#164B69;}
        h1 { color:#fff;}
        .list {
            background:rgb(233,238,241);
            border-radius: 10px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
            padding:15px 15px 0px 15px;
            width:320px;
            float:left;
            margin:10px;
        }
        .list ul{
            width:100%;
            list-style-type:none;
            padding:0;
        }
        .list li{
            margin:0 -15px 0 -15px;
            font-size:1.2em;
            padding:15px 0 15px 15px;
            border-top:1px solid #ddd;
        }
        .list p{
            font-size:0.8em;
            color:#555;
        }
        .list a{
            color:black;
            text-decoration:none;
        }
        .list a:hover li{
            background:#279;
            color:white;
        }

        .comments h1{
            font-size:1.5em;
            color:#000;
        }

        .comments h2{
            font-size:1.5em;
        }
        .comments{
            margin-top:-5px;
            font-size:0.8em;
        }
        .downloader{
            background: #87e0fd; /* Old browsers */
            background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
            background: linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

            border-radius: 3px;
            padding:5px;

            margin-right:10px;
            font-size:1em;
            text-decoration:none;
            color:#fff;
        }

        .downloader:hover{
            box-shadow: 0px 0px 15px rgba(255,255,255,0.6);
            padding:8px;
            margin-left:-4px;
            margin-right:8px;
            cursor:pointer;
        }

        .masonry,
        .masonry .masonry-brick {
            -webkit-transition-duration: 0.7s;
            -moz-transition-duration: 0.7s;
            -ms-transition-duration: 0.7s;
            -o-transition-duration: 0.7s;
            transition-duration: 0.7s;
        }

        .masonry {
            -webkit-transition-property: height, width;
            -moz-transition-property: height, width;
            -ms-transition-property: height, width;
            -o-transition-property: height, width;
            transition-property: height, width;
        }

        .masonry .masonry-brick {
            -webkit-transition-property: left, right, top;
            -moz-transition-property: left, right, top;
            -ms-transition-property: left, right, top;
            -o-transition-property: left, right, top;
            transition-property: left, right, top;
        }

        @media print{
            .downloader,.info-list{
                display:none;
            }
            body,caption,table{
                box-shadow:none!important;
                background:none!important;
                -webkit-border-radius:0;
                -moz-border-radius:0;
                -ms-border-radius:0;
                -o-border-radius:0;
                border-radius:0;
                border-spacing:0;margin:0;
            }
            h1{color:black;}
            th,td{border:#999 solid 1px;}
        }
        .show{
            -webkit-print-color-adjust:exact;
        }
    </style>

</head>
<body>
<div id="view">
</div>
</body>
</html>
